<template>
	<view class="com-link y-flex y-row y-align-center" :style="{'background-color': bgColor, 'border-radius': borderRadius + 'rpx'}" @tap="handleTap">
		<com-logo v-if="icon" class="mr-20" size="100" :src="icon" :radius="iconBorderRadius" :color="iconColor" mode="aspectFill"></com-logo>
		<view class="y-flex y-flex-1">
			<com-text lines="1" :value="title" weight="bold" size="32rpx" :color="titleColor"></com-text>
			<com-text lines="1" style="margin-top: 10rpx" v-if="description" :value="description" size="28rpx" :color="textColor"></com-text>
		</view>
		<com-icon name="right" style="margin-left: 30rpx" size="40" :color="arrowColor"></com-icon>
	</view>
</template>

<script>
	export default {
		inject: ['getSkinColor', 'navigate'],
		props: {
			data: {
				type: Object,
				default () {
					return new Object
				}
			},
			bgColor: {
				type: String,
				default: ''
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			//标题
			title () {
				return this.data.title || ''
			},
			//介绍
			description () {
				return this.data.description || ''
			},
			icon () {
				return this.data.icon || ''
			},
			iconColor () {
				return this.options.iconColor || '#333333'
			},
			borderRadius () {
				return this.options.borderRadius
			},
			iconBorderRadius () {
				return this.options.iconBorderRadius || 0
			},
			titleColor () {
				return this.skinColor.color_1
			},
			textColor() {
				return this.skinColor.color_3
			},
			arrowColor () {
				return this.skinColor.color_5
			}
		},
		methods: {
			handleTap () {
				this.navigate(this.data.url)
			}
		}
	}
</script>

<style>
	.com-link {
		padding: 30rpx 30rpx;
	}
	.com-link-btn {
		width: 160rpx;
		height: 55rpx;
	}
</style>